<template lang="">

<van-pull-refresh v-model="loading" @refresh="onRefresh">


<!--  搜索框 -->
<productSearch></productSearch>

<!--  轮播图 -->
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

<!-- 列表 -->
<van-grid square>
  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
</van-grid>



<!--  商品列表 -->
  <van-list
  v-model:loading="loading1"
  :finished="finished"
  finished-text="没有更多了"
  @load="loadMore"
  :immediate-check="false"
>
  <van-row justify="space-around" :gutter="[20,20]" class="product-list">
  <van-col class="product-item" span="12" v-for="value in productArr" :key="value.proid"
    @click="$router.push('/detail?id=' + value.proid)">
    <img :src="value.img1" alt="">
    <div class="product-name">{{value.proname}}</div>
  </van-col>
</van-row>

</van-list>

<!-- 底部导航栏 -->
<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o" @click="$router.push('/home')">首页</van-tabbar-item>
  <van-tabbar-item icon="search" @click="$router.push('/prolist')">分类</van-tabbar-item>
  <van-tabbar-item icon="friends-o" @click="$router.push('/cart')">购物车</van-tabbar-item>
  <van-tabbar-item icon="setting-o" @click="$router.push('/my')">我的</van-tabbar-item>
</van-tabbar>

</van-pull-refresh>

</template>
<script>
import { ref } from 'vue';
import { productListRequest } from '../api/homeApi';
import { showToast } from 'vant';
import productSearch from '@/components/productSearch.vue';

export default {
   components: {
    productSearch
  },
  setup() {
    const count = ref(0);
    const active = ref(0);
    const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };

    return {
      count,
      active,
      loading,
      onRefresh,
    };
  },
  data() {
    return {
      value: '',
      productArr: {},
      loading1: false,
      finished: false,
      pageNum: 1,//记录页码
    }
  },
  methods: {
    async loadMore() {
      console.log('loadMore');
      this.pageNum++;//页码加一
      let res = await productListRequest(this.pageNum);//请求数据
      // console.log(res);
      this.productArr.push(...res.data.data)//将数据添加到数组中
      this.loading1 = false;//关闭下拉刷新
    }
  },
  async created() {
    let res = await productListRequest(this.pageNum);
    console.log(res);
    this.productArr = res.data.data;
    console.log(this.productArr);
  }
}
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.product-item {
  // width: 150px;
  // width: 100%;
  height: 250px;

  img {
    width: 100%;
  }
}

.product-list {
  padding-bottom: 55px;
}

.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
</style>
